<template>
  <div class="all">
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项编号：{{ postmessage.number }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">上报人：{{ postmessage.reportPerson }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报时间：{{ postmessage.createTime }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8" style="cursor: pointer" @click.native="openClik"
        >事件地点：<i class="el-icon-map-location" style="font-size: 20px"></i>{{ postmessage.location }}</el-col
      >
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">上报人所属网格：{{ postmessage.grid }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">
        处置部门：<span @click="idGetUser"
          >{{ postmessage.responsibilityName }}
          <span v-show="!assignedUser">
            <a href="javascript:void(0);">查看人员</a><i class="el-icon-caret-right"></i></span
        ></span>
        <span v-show="assignedUser"> - {{ assignedUser }}</span>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">问题类型：{{ postmessage.subTypeName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">问题描述：{{ postmessage.mdescribe }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="8">事项来源：{{ postmessage.matterSourceName }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">
        操作：
        <el-select v-model="value" placeholder="请选择" size="small" @change="choose">
          <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value">
          </el-option> </el-select
      ></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="postmessage.returncause">
      <el-col :span="8">退回原因：{{ postmessage.returncause }}</el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8">事项状态：{{ postmessage.statusName }}</el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="postmessage.voice">
      <el-col :span="9"
        >音频文件：<audio
          ref="audio"
          :src="postmessage.voice"
          autoplay="autoplay"
          preload="auto"
          controls="controls"
        ></audio>
      </el-col>
      <el-col :span="1"></el-col>
      <el-col :span="8"> </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="3">图片证明：</el-col>
      <el-col :span="5">
        <el-image
          style="width: 100px; height: 100px"
          :src="this.postmessage.preImgList[0]"
          :preview-src-list="postmessage.preImgList"
        >
        </el-image>
      </el-col>
      <el-col :span="5"
        ><el-image
          style="width: 100px; height: 100px"
          :src="this.postmessage.preImgList[1]"
          :preview-src-list="postmessage.preImgList"
          v-show="postmessage.preImgList[1]"
        >
        </el-image
      ></el-col>
      <el-col :span="5"
        ><el-image
          style="width: 100px; height: 100px"
          :src="this.postmessage.preImgList[2]"
          :preview-src-list="postmessage.preImgList"
          v-show="postmessage.preImgList[2]"
        >
        </el-image
      ></el-col>
    </el-row>
    <el-row v-show="value == 8">
      <el-col style="margin-left: 119px">
        <el-form ref="form" label-width="90px">
          <el-form-item label="处置图片：">
            <el-upload
              ref="upload"
              :headers="headers"
              :action="upaction + '/matters/upload'"
              list-type="picture-card"
              :auto-upload="true"
              :limit="3"
              :file-list="fileList"
              :on-success="success"
              :on-exceed="handleExceed"
              :on-change="handleChange"
              :on-progress="openmask"
              accept=".jpg,.png"
              :before-upload="handleBeforeUpload"
            >
              <i slot="default" class="el-icon-plus"></i>
              <div slot="file" slot-scope="{ file }" class="list__item-thumbnail">
                <img class="el-upload-list__item-thumbnail" :src="file.url" alt="" />
                <span class="el-upload-list__item-actions">
                  <span class="el-upload-list__item-preview" @click="handlePictureCardPreview(file)">
                    <i class="el-icon-zoom-in"></i>
                  </span>
                </span>
              </div>
            </el-upload>
          </el-form-item>
        </el-form>
      </el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="value == 8">
      <el-col :span="8"
        ><el-form ref="form" label-width="90px">
          <el-form-item label="处置结果：">
            <el-input
              type="textarea"
              show-word-limit
              resize="none"
              :rows="5"
              v-model="post.result"
              maxlength="50"
              placeholder="请输入50字以内"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center" v-show="value == 6">
      <el-col :span="8"
        ><el-form ref="form" label-width="90px">
          <el-form-item label="退回原因：">
            <el-input
              type="textarea"
              show-word-limit
              resize="none"
              :rows="5"
              v-model="post.returncause"
              maxlength="50"
              placeholder="请输入50字以内"
            ></el-input>
          </el-form-item>
        </el-form>
      </el-col>
      <el-col :span="2"></el-col>
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-row type="flex" class="row-bg" justify="center">
      <el-col :span="10">
        <div :class="{ hideBox: timeHide }">
          <el-timeline :reverse="true">
            <el-timeline-item v-for="(activity, index) in process" :key="index" :timestamp="activity.time">
              {{ activity.clue }}
            </el-timeline-item>
          </el-timeline>
        </div>
        <div v-if="process.length > 2" class="more" @click="timeMore">
          <i :class="timeHide ? 'el-icon-caret-bottom' : 'el-icon-caret-top'"></i> 查看更多
        </div>
      </el-col>
      <el-col :span="10"></el-col>
    </el-row>
    <el-row :gutter="20">
      <el-col :span="8"><div class="grid-content bg-purple"></div></el-col>
      <el-col :span="8"><el-button type="primary" class="check" @click="check">提交</el-button></el-col>
      <el-col :span="5"><div class="grid-content bg-purple"></div></el-col>
    </el-row>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="" />
    </el-dialog>
    <el-dialog :append-to-body="true" top="30px" :visible.sync="centerDialogVisible" width="80%" center>
      <BDmap v-if="centerDialogVisible" :childmessage="messages" :locations="location"></BDmap>
    </el-dialog>
  </div>
</template>

<script>
import api from '@/api/api'
import Seats from '@/api/Seats'
import env from '@/utils/env'
export default {
  props: {
    postmessage: {
      type: Object,
      default() {
        return {}
      },
    },
    winState: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      show: false,
      centerDialogVisible: false,
      messages: {},
      location: '',
      loading: false,
      token: '',
      headers: {},
      dialogImageUrl: '',
      dialog: false,
      disabled: false,
      dialogVisible: false,
      disposeImgs: [],
      fileList: [],
      value: '',
      message: false,
      options: [
        {
          value: '8',
          label: '处置',
        },
        {
          value: '6',
          label: '退回值班长',
        },
      ],
      post: {
        disposeImgs: [],
        matterId: '',
        result: '',
        status: '',
        returncause: '',
        returnNumber: this.postmessage.returnNumber,
      },
      upaction:
        process.env.NODE_ENV === 'production'
          ? env.prod.baseUrl
          : process.env.NODE_ENV === 'test'
          ? env.test.baseUrl
          : env.dev.baseUrl,
      process: [],
      timeHide: true,
      assignedUser: '',
    }
  },
  watch: {
    winState: function (e) {
      if (e) {
        this.getclue()
      }
    },
  },
  methods: {
    infoWindowClose() {
      this.show = false
    },
    infoWindowOpen() {
      this.show = true
    },
    async openClik() {
      this.location = this.postmessage.location
      await Seats.convert(this.postmessage.latitude, this.postmessage.longitude).then(e => {
        this.messages.lat = e.lat
        this.messages.lng = e.lng
        this.centerDialogVisible = true
      })
    },
    openmask() {
      this.message = true
    },
    handleBeforeUpload(file) {
      var testmsg = file.name.substring(file.name.lastIndexOf('.') + 1)
      const extension1 = testmsg === 'jpg'
      const extension2 = testmsg === 'jpeg'
      const extension3 = testmsg === 'png'
      // const isLt2M = file.size / 1024 / 1024 < 10
      if (!extension1 && !extension2 && !extension3) {
        this.$message({
          message: '上传文件只能是.jpg,.jpeg,.png格式!',
          type: 'error',
        })
        return false
      } else {
        return true
      }
    },
    getclue() {
      api.getclue({ matterId: this.postmessage.matterId }).then(res => {
        if (res.code == 200) {
          this.process = res.data
        }
      })
    },
    timeMore() {
      this.timeHide = !this.timeHide
    },
    success(res) {
      if (res.code == 200) {
        this.post.disposeImgs.push(res.data.minIoUrl)
        this.message = false
      }
    },
    choose(val) {
      this.post.status = val
      if (val == 6) {
        this.post.returncause = ''
      } else if (val == 8) {
        this.post.disposeImgs = []
        this.post.result = ''
      }
    },
    handleExceed() {
      this.$message({
        message: '最大上传图片数为3张！',
        type: 'error',
      })
    },
    handleChange(file, fileList) {
      this.fileList = fileList.slice(-3)
    },
    check() {
      this.post.matterId = this.postmessage.matterId
      if (this.value == 8) {
        if (this.post.result == '') {
          this.$message({
            message: '请输入处置结果！',
            type: 'error',
          })
        } else if (this.post.disposeImgs.length == 0) {
          this.$message({
            message: '请上传至少一张图片证明！',
            type: 'error',
          })
        } else {
          if (this.message == true) {
            this.$message({
              message: '图片上传中！上传完毕后再提交',
              type: 'info',
            })
            return
          } else {
            Seats.matters(this.post).then(res => {
              if (res.code == 200) {
                this.post.disposeImgs = []
                this.post.result = ''
              }
              this.$refs['upload'].clearFiles()
              this.$parent.$parent.Tips()
            })
          }
        }
      } else if (this.value == 6) {
        if (this.post.returncause == '') {
          this.$message({
            message: '请输入退回原因！',
            type: 'error',
          })
        } else {
          this.post.returnNumber++
          Seats.matters(this.post).then(res => {
            if (res.code == 200) {
              this.value = ''
              this.post.returncause = ''
              this.$parent.$parent.Tips()
            }
          })
        }
      }
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    idGetUser() {
      Seats.idGetUser({ id: this.postmessage.responsibilityId }).then(res => {
        this.assignedUser = res.data.fullName
      })
    },
  },
  created() {
    this.token = localStorage.getItem('Authorization')
    this.headers = { Authorization: this.token }
    this.getclue()
  },
}
</script>

<style lang="scss" scoped>
.all {
  overflow: hidden;
  .el-row {
    font-size: 14px;
    margin-bottom: 20px;
    &:last-child {
      margin-bottom: 0;
    }
  }
  .el-col {
    border-radius: 4px;
  }
  .grid-content {
    border-radius: 4px;
    min-height: 36px;
  }
  .row-bg {
    padding: 10px 0;
  }
  ::v-deep .el-textarea__inner {
    height: 112px;
  }
  .list__item-thumbnail {
    width: 150px;
    height: 150px;
    ::v-deep .el-upload-list__item-thumbnail {
      width: 100%;
      height: 100%;
    }
  }
  .hideBox {
    height: 100px;
    overflow: hidden;
  }
  .more {
    padding: 10px 0;
    text-align: center;
    cursor: pointer;
  }
  .check {
    width: 88px;
    height: 37px;
    margin: 0 auto;
  }
}
</style>
